<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>个人资料</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/self.js"></script>
</head>
<body  ontouchstart="">
    <div class="detailTop pf w100 of">
         <div class="w100 of tc c3 f18">
             <span class="pa" style="left: 10px;font-size: 30px;color: #444444;" onclick="javascript:history.back();">&laquo;</span>
             更换头像
         </div>
    </div>

    <div class="container jz" style="margin-top: 41px;">
        <section id="touxiangClip" class="touxiangClip w100 bcf of">
            <div id="clipArea"></div>
            <div class="w100 of clearfix" style="width: 80%;margin: 9px auto;">
                <button type="button" id="fileFake" class="choosePic fl" onclick="choosePic();">选择图片</button>
                <input type="file" id="file">
                <button id="clipBtn" class="choosePic fr" style="background:#ccccff;">截取</button>
            </div>
            <div id="view"></div>
            <P class="w100 tc c6 f12 mgt10 mgb32">截图预览</P>
        </section>
        <script src="js/iscroll-zoom.js"></script>
        <script src="js/hammer.js"></script>
        <script src="js/lrz.all.bundle.js"></script>
        <script src="js/jquery.photoClip.js"></script>
        <script>
            function choosePic() {
                $("#file").trigger('click');
            }

            //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            var clipArea = new bjj.PhotoClip("#clipArea", {
                size: [150, 150],
                outputSize: [150, 150],
                file: "#file",
                view: "#view",
                ok: "#clipBtn",
                loadStart: function() {
                    console.log("照片读取中");
                },
                loadComplete: function() {
                    console.log("照片读取完成");
                },
                clipFinish: function(dataURL) {
                    console.log(dataURL);
                    saveImageInfo();
                }
            });
            //clipArea.destroy();


            //图片上传
            function saveImageInfo() {
                var filename = $('#view').attr('fileName');
                var img_data = $('#view').attr('src');
                if(img_data==""){alert('null');}
                $.post("这里填写图片获取的网址", {image: img_data}, function (data) {
                    if (data != '') {
                        //console.info(data);
                        //data 为返回文件名；
                        console.log('提交成功');
                    }
                });
            }


        </script>
        <style>
            #clipArea {
                margin: 3% 8%;
                height: 200px;
            }
            #file{
                display: none;
            }
            #view {
                margin: 0 auto;
                width: 110px;
                height: 110px;
            }
        </style>
    </div><!--container-->


</body>
</html>
</html>
</html>
</html>